<template>
    <div class="login-container">
        <h2>登录</h2>
        <el-form :model="form" :rules="rules" ref="loginForm" @submit.prevent="handleLogin">
            <el-form-item prop="username">
                <el-input v-model="form.username" placeholder="请输入用户名" prefix-icon="User" />
            </el-form-item>

            <el-form-item prop="password">
                <el-input v-model="form.password" type="password" placeholder="请输入密码" prefix-icon="Lock"
                    show-password />
            </el-form-item>

            <el-button type="primary" native-type="submit" class="login-btn">
                登录
            </el-button>
            <el-form-item>
            </el-form-item>
            <el-button @click="goToRegister" class="register-link-btn">
                没有账号？去注册
            </el-button>
        </el-form>
    </div>
</template>

<script>
import * as common from '../utils/common'
import { userlogin } from '../api/userlogin'
import router from '../router'
export default {
    data() {
        return {
            form: {
                username: '',
                password: ''
            },
            rules: {
                username: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '密码不能为空', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        handleLogin() {
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    let param = {
                        username: this.form.username,
                        password: this.form.password
                    }
                    userlogin(param).then(res => {
                        if (res.flag == true) {
                            if (true) {
                                common.setSessionStorage('user', res.result)
                                this.$message.success("登录成功")
                                this.$router.push({ path: '/layout' })

                            }
                            else {
                                this.$message.error("密码错误")
                            }
                        }
                        else {
                            this.$message.error(res.reason)
                        }
                    })
                }
            })
        },
        goToRegister() {
            this.$router.push({ path: '/register' })
        }
    }
}
</script>

<style scoped>
.login-container {
    max-width: 400px;
    margin: 100px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
}

.form-group {
    margin-bottom: 20px;
}

.form-input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top: 5px;
}

.login-btn {
    background-color: #409eff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 10px;
}

.register-link-btn {
    background: none;
    border: none;
    color: #409eff;
    text-decoration: underline;
    cursor: pointer;
}
</style>